<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/** @var $this \Magento\Cms\Block\Adminhtml\Wysiwyg\Images\Content\Uploader */
?>

<div id="<?php echo $this->getHtmlId() ?>" class="uploader">
    <span class="fileinput-button form-buttons">
        <span><?php echo __('Browse Files...') ?></span>
        <input class="fileupload" type="file" name="<?php echo $this->getConfig()->getFileField() ?>" data-url="<?php echo $this->getConfig()->getUrl() ?>" multiple>
    </span>
    <div class="clear"></div>
    <script type="text/x-jquery-tmpl" id="<?php echo $this->getHtmlId() ?>-template">
        <div id="${id}" class="file-row">
            <span class="file-info">${name} (${size})</span>
            <div class="progressbar-container">
                <div class="progressbar upload-progress" style="width: 0%;"></div>
            </div>
            <div class="clear"></div>
        </div>
    </script>
    <script type="text/javascript">
require(["jquery","jquery/file-uploader","jquery/template"], function($){
    $(function () {
            $('#<?php echo $this->getHtmlId() ?> .fileupload').fileupload({
                dataType: 'json',
                formData: {
                    isAjax: 'true',
                    form_key: FORM_KEY
                },
                sequentialUploads: true,
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
                maxFileSize: <?php echo $this->getFileSizeService()->getMaxFileSize()?>,
                add: function(e, data) {
                    var $template = $('#<?php echo $this->getHtmlId(); ?>-template');
                    $.each(data.files, function (index, file) {
                        data.fileId =  Math.random().toString(36).substr(2,9);
                        var $element = $template.tmpl({
                            size: byteConvert(file.size),
                            name: file.name
                        });
                        $element.data('image', data).appendTo('#<?php echo $this->getHtmlId() ?>');
                    });
                    $(this).fileupload('process', data).done(function () {
                        data.submit();
                    });
                },
                done: function(e, data) {
                    var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
                    $(progressSelector).css('width','100%');
                    if (data.result && !data.result.hasOwnProperty('errorcode')) {
                        $(progressSelector).removeClass('upload-progress').addClass('upload-success');
                    } else {
                        $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
                    }
                },
                progress: function(e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
                    $(progressSelector).css('width', progress + '%');
                },
                fail: function(e, data) {
                    var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
                    $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
                }
            });

            $('#<?php echo $this->getHtmlId() ?> .fileupload').fileupload('option', {
                process: [
                    {
                        action: 'load',
                        fileTypes: /^image\/(gif|jpeg|png)$/,
                        maxFileSize: <?php echo $this->getFileSizeService()->getMaxFileSize() ?> * 10
                    },
                    {
                        action: 'resize',
                        maxWidth: <?php echo \Magento\Framework\File\Uploader::MAX_IMAGE_WIDTH ?>,
                        maxHeight: <?php echo \Magento\Framework\File\Uploader::MAX_IMAGE_HEIGHT ?>
                    },
                    {
                        action: 'save'
                    }
                ]
            });
        });
    });
</script>
</div>
